<template>
	<view class="entry-card">
		<view
			class="entry"
			v-for="entry in entries"
			:key="entry.icon"
			@click="actionScheme({scheme:entry.scheme})"
		>
			<u-image
				class="icon"
				:width="2*entry.width"
				:src="`/static/imgs/entryIcon/${entry.icon}.jpg`"
				mode="widthFix"
			/>
			<view class="text">{{entry.name}}</view>
			<u-badge
				v-if="showBadge"
				type="error"
				size="mini"
				:offset="[-20,15]"
				:count="entry.count"
			/>
		</view>
		<button
			class="entry invite"
			open-type="share"
		>
			<u-image
				class="icon"
				:width="48"
				src="/static/imgs/entryIcon/invite.jpg"
				mode="widthFix"
			/>
			<view class="text">邀请好友</view>
		</button>
	</view>
</template>

<script>
import { getAllUnread } from '@/api/message'
import { actionScheme } from '@/utils/scheme'
export default {
  data() {
    return {
      entries: [
        { name: '消息', icon: 'message', width: '32', count: 0, scheme: 'systemInform' },
        { name: '已购项目', icon: 'purchased', count: 0, width: '26', scheme: 'projectPurchased' },
        { name: '简历', icon: 'resume', count: 0, width: '26', scheme: 'resume' },
        { name: '收藏', icon: 'collection', count: 0, width: '26', scheme: 'myCollection' },
        { name: '钱包', icon: 'wallet', count: 0, width: '29', scheme: 'myWallet' },
        { name: '历史记录', icon: 'history', count: 0, width: '25', scheme: 'myHistory' },
        { name: '设置', icon: 'setting', count: 0, width: '28', scheme: 'setting' },
      ],
      showBadge: true, // u-badge组件无法响应式。暴力重刷
    }
  },
  methods: {
    actionScheme,
    /**
     * 加载未读消息数量
     */
    async loadUnread() {
      this.showBadge = false

      const res = await getAllUnread()

      this.entries[ 0 ].count = res.systemMessageCount

      this.showBadge = true
      this.$forceUpdate()
    }
  }
}
</script>

<style lang="scss" scoped>
.entry-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  .entry {
    position: relative;

    &.invite {
      @include clearBtnStyle();
    }

    width: 25%;
    height: 60px;
    font-size: $sSmall;
    color: $dark2;
    text-align: center;

    &:nth-child(1),
    &:nth-child(2),
    &:nth-child(3),
    &:nth-child(4) {
      margin-bottom: 20px;
    }

    .icon {
      display: flex;
      justify-content: center;
      height: 30px;
      margin-bottom: 10px;
    }
  }
}
</style>
